import { Radio } from 'antd';
import React from 'react';
import _ from 'lodash';

export default function YearsRender(props) {
  const { currentYear, overAllYears, dispatch } = props;

  const changeCurrentYear = data => {
    dispatch({
      type: 'AllReturnMoneyPlan/changeCurrentYear',
      payload: {
        currentYear: data.target.value,
      },
    });
  };

  if (!_.isEmpty(overAllYears)) {
    return (
      <div style={{ position: 'fixed', right: '40px' }}>
        <Radio.Group
          onChange={e => changeCurrentYear(e)}
          value={currentYear}
          buttonStyle="solid"
          size="small"
        >
          {overAllYears.map((element, index) => {
            if (index <= 15) {
              return (
                <Radio.Button key={element} value={element}>
                  {element}
                </Radio.Button>
              );
            }
            return null;
          })}
          {overAllYears.length > 15 && <Radio.Button disabled>...</Radio.Button>}
        </Radio.Group>
      </div>
    );
  }
}
